<template>
	<a-descriptions size="small">
		<template #title>
			<div class="d-module-title"><b>基本信息</b></div>
		</template>
		<a-descriptions-item label="退租类型">{{ dataSource.statusInfo.name }}</a-descriptions-item>
		<a-descriptions-item label="操作人">{{ dataSource.cancelInfo.rejectName }}</a-descriptions-item>
		<a-descriptions-item label="退租时间">{{ dataSource.cancelInfo.rejectTime }}</a-descriptions-item>
		<a-descriptions-item label="退款账号类型">{{ dataSource.cancelInfo.paymentAccountType && accountTypeList[dataSource.cancelInfo.paymentAccountType] }}</a-descriptions-item>
		<a-descriptions-item label="退款账号" :span="2">{{ dataSource.cancelInfo.paymentAccount }}</a-descriptions-item>
		<a-descriptions-item label="退租备注" :span="3">{{ dataSource.cancelInfo.reason }}</a-descriptions-item>
	</a-descriptions>
	<a-divider type="horizontal" style="background-color: #f5f5f5; margin: 20px 0" />
	<div class="d-module-title" style="margin-bottom: 20px">
		<b>退租明细</b>
	</div>
	<vxe-table :data="tableData" border stripe size="small" align="center" :row-config="{isHover: true}" show-overflow>
		<vxe-column title="收付类型" :width="150">
			<template #default="{row}">
				<a-tag :color="row.feeDirection === 1 ? 'processing' : 'error'">{{ row.feeDirection === 1 ? '待收' : '待付' }}</a-tag>
			</template>
		</vxe-column>
		<vxe-column title="费用科目" field="feeSubjectName" />
		<vxe-column title="金额">
			<template #default="{row}">{{ row.amount }}元</template>
		</vxe-column>
		<vxe-column title="账单周期">
			<template #default="{row}">{{ row.beginDate }}-{{ row.endDate }}</template>
		</vxe-column>
	</vxe-table>
</template>

<script setup lang="ts">
	import {computed} from 'vue'

	interface tagProps {
		[key: string]: any
	}
	const props = defineProps({
		dataSource: {
			type: Object,
			required: true
		}
	})

	const tableData = computed(() => {
		console.log(JSON.parse(props.dataSource.cancelInfo.financeDetailInfo))
		return JSON.parse(props.dataSource.cancelInfo.financeDetailInfo)
	})

	const signType: {
		[key: string | number]: any
	} = {1: '新签', 2: '续签', 3: '转租', 4: '换房'}

	const accountTypeList: any = {
		1: '银行卡',
		2: '支付宝',
		3: '微信'
	}
</script>

<style lang="less" scoped>
	:deep(.ant-descriptions-item-label) {
		color: rgba(0, 0, 0, 0.45);
	}
</style>
